<template>
	<view>
		<swiper :indicator-dots="true" class="swiperBox" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,i) in activedetails.images">
				<image :src="$util.img(item)" mode="widthFix"></image>
			</swiper-item>
		</swiper>
		<view class="activity_body">
			<view class="activity_body_tit">{{activedetails.title||''}}</view>
			<view class="info_list">
				<view class="info_item">
					<image src="/static/icon/dic1.png" mode=""></image>
					<view class="" v-if="activedetails.start_time">
						{{timestampToTimeS(activedetails.start_time)}}-{{timestampToTimeS(activedetails.end_time)}}
					</view>
				</view>
				<view class="info_item">
					<image src="/static/icon/dic2.png" mode=""></image>
					<view class="">¥{{activedetails.fee||0}}元/人</view>
				</view>
				<view class="info_item2">
					<image src="/static/icon/dic3.png" mode=""></image>
					<view class="info_item2_txt">
						<view class="">{{activedetails.city||''}}</view>
						<view class="">{{activedetails.address||''}}</view>
					</view>
				</view>
			</view>
			<!-- 参与人数 -->
			<view class="joinList">
				<view class="joinList_num"><text>{{activedetails.application_num||0}}</text>/{{activedetails.num||0}}人参与
				</view>
				<scroll-view scroll-x="true" class="scroll_pic">
					<block v-for="(item,i) in userList" :key="i">
						<image :src="$util.img(item.avatar)" mode=""></image>
					</block>
				</scroll-view>
			</view>
			<!-- 活动地址 -->
			<view class="address">
				<view class="title-s">活动地址</view>
				<view class="info_item2_txt">
					<view class="">{{activedetails.city||''}}</view>
					<view class="">{{activedetails.address||''}}</view>
				</view>
				<view class="w-686 h-272">
					<map name="map" style="width: 686rpx;height: 272rpx;" @callouttap="callouttap"
						@markertap="callouttap" :markers="markers" :latitude="activedetails.latitude"
						:longitude="activedetails.longitude"></map>
				</view>
				<!-- 	<image style="width: 686rpx;height: 272rpx;"
					src="https://yingze.xing-peng.com/upload/1/common/images/20230508/20230508105812168351469252744.png"
					mode=""></image> -->
			</view>
			<!-- 活动描述 -->
			<view class="describe">
				<view class="title-s">活动描述</view>
				<view class="" v-html="formatImg(activedetails.content)"></view>
			</view>
			
			<!-- 报名须知 -->
			<view class="describe">
				<view class="title-s">报名须知</view>
				<view class="" v-html="formatImg(activedetails.notice_content)"></view>
			</view>
		</view>
		<view class="actBtn">
			<button class="actBtnA" open-type="contact">咨询客服</button>
			<button class="actBtnC" v-if="type!='my'&&activedetails.status=='已结束'">已结束</button>
			<button class="actBtnB" v-else-if="type!='my'&&activedetails.application_num!=activedetails.num"
				@click="submit">立即报名</button>
			<button class="actBtnC"
				v-else-if="type!='my'&&activedetails.application_num==activedetails.num">已满员</button>
		</view>
		<view class="" style="padding-bottom: env(safe-area-inset-bottom);"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activedetails: {},
				userList: [],
				markers: [],
				type: ''
			};
		},
		onLoad(res) {
			if (res.type) {
				this.type = res.type
			}
			this.id = res.id
			this.activedetailsFn(res.id)
			this.getActiveUserList(res.id)
		},
		onShow() {
			this.getUserInfo()
			this.activedetailsFn(this.id)
			this.getActiveUserList(this.id)
		},
		methods: {
			formatImg(html) {
				var newContent = html.replace(/<img[^>]*>/gi, (match) => {
					let processed = null;
					if (!match.match(/style=\"(.*)\"/gi)) {
						processed = match.replace(/\<img/g, '<img style="width:100%;height:auto;display:block"');
					} else {
						processed = match.replace(/style=\"(.*)\"/gi,
							'style="width:100%;height:auto;display:block"');
					}
					return processed;
				});
				return newContent;
			},
			submit() {
				if (uni.getStorageSync('token')) {
					this.$util.redirectTo('/otherpages/signUp/signUp', {
						id: this.activedetails.id
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '请您先登录',
						showCancel: false,
						success: res => {
							this.$util.redirectTo('/pages/login/login')
						}
					});
				}
			},
			// 获取用户信息
			getUserInfo() {
				this.$api.sendRequest({
					url: '/api/user/userInfo',
					success: res => {
						uni.setStorageSync('userId', res.data.mobile);
					}
				})
			},
			// 点击地图上的标记
			callouttap() {
				this.$util.mapNavigate(this.activedetails.latitude, this.activedetails.longitude, this.activedetails
					.address)
			},
			// 获取报名人员的信息
			getActiveUserList(id) {
				this.$api.sendRequest({
					url: '/api/active/activeUserList',
					data: {
						active_active_id: id
					},
					success: res => {
						this.userList = res.data
					}
				})
			},

			timestampToTimeS(timestamp) {
				var date = new Date(timestamp * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '年';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月';
				var D = date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate();
				var h = date.getHours() < 10 ? '0' + (date.getHours()) + ':' : date.getHours() + ':';
				var m = date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes();
				return Y + M + D + " " + h + m;
			},

			activedetailsFn(id) {
				this.$api.sendRequest({
					url: '/api/active/activedetails',
					data: {
						id: id
					},
					success: res => {
						this.activedetails = res.data
						let item = res.data
						this.markers.push({
							id: item.id,
							latitude: item.latitude,
							longitude: item.longitude,
							iconPath: 'https://gaoerfu.xing-peng.com/upload/1/common/images/20230515/20230515034724168413684473630.png',
							title: item.address,
							width: '4rpx',
							height: '2rpx',
							display: 'ALWAYS',
							callout: { //自定义标记点上方的气泡窗口 点击有效  
								content: `${item.address}`, //文本
								color: '#ffffff', //文字颜色
								fontSize: 15, //文本大小
								borderRadius: 15, //边框圆角
								padding: '10rpx',
								bgColor: '#ff5f0d', //背景颜色
								display: 'ALWAYS', //常显
							},
						})
						this.$forceUpdate()
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiperBox {
		width: 694rpx !important;
		height: 328rpx !important;
		border-radius: 10rpx;
		margin: 25rpx auto;

		image {
			width: 694rpx;
			height: 328rpx;
			border-radius: 10rpx;
		}

	}

	.actBtn {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding-bottom: env(safe-area-inset-bottom);
		display: flex;
		justify-content: space-around;
		margin-bottom: 30rpx;

		.actBtnA {
			width: 332rpx;
			height: 88rpx;
			background: #F7C036;
			border-radius: 44rpx;
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
		}

		.actBtnB {
			width: 332rpx;
			height: 88rpx;
			background: #EC6930;
			border-radius: 44rpx;
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
		}

		.actBtnC {
			width: 332rpx;
			height: 88rpx;
			background: #b5b5b3;
			border-radius: 44rpx;
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #000000;
			line-height: 88rpx;
			text-align: center;
		}

		.actBtn1 {
			width: 686rpx;
			height: 80rpx;
			background: #FF4C74;
			border-radius: 10rpx;
			margin: 0 auto;
			font-size: 32rpx;
			font-family: PingFangTC-Medium, PingFangTC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
		}
	}

	.describe {
		margin: 20rpx 0;

		:nth-child(2) {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.6);
			line-height: 40rpx;
		}
	}

	.info_item2_txt {
		:nth-child(1) {

			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.8);
			line-height: 32rpx;
		}

		:nth-child(2) {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.5);
			line-height: 50rpx;
		}
	}

	.title-s {
		margin-bottom: 20rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: rgba(0, 0, 0, 0.8);
	}

	.joinList {
		height: 214rpx;
		border-bottom: 2rpx solid #efefef;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;

		.joinList_num {
			text {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: rgba(0, 0, 0, 0.8);
			}

			font-size: 28rpx;
			font-family: PingFangSC-Medium,
			PingFang SC;
			font-weight: 400;
			color: rgba(127, 127, 127, 1);
		}

		.scroll_pic {
			white-space: nowrap;

			image {
				margin-right: 20rpx;
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				display: inline-block;
			}
		}
	}

	.info_list {
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #efefef;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 12rpx;
		}

		.info_item {
			margin-top: 20rpx;
			display: flex;
			align-items: center;

			view {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
			}
		}

		.info_item2 {
			margin-top: 24rpx;
			display: flex;

		}
	}

	.head_bg {
		// background-image: url('https://yingze.xing-peng.com/upload/1/common/images/20230508/20230508105812168351469252744.png');
		width: 750rpx;
		height: 520rpx;
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.activity_body {
		padding: 25rpx 30rpx;
		margin-top: -20rpx;
		width: 690rpx;
		min-height: 200rpx;
		background: #f7f7f7;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding-bottom: 120rpx;

		.activity_body_tit {
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.8);
		}
	}
</style>
